<style>
    body,
    html {
        width: 100%;
        height: 100%;
    }

    body>div {
        height: 250px;
        width: 250px;
        background: url(./img/wsc.jpg) no-repeat center;
        display: none;
    }

    p {
        position: absolute;
        top: 0;
        left: 0;
        width: 10vw;
        height: 50px;
        background: #ccc;
        font: 30px/50px "";
        color: greenyellow;
        text-align: center;
    }

    button {
        height: 50px;
        width: 200px;
        background: #ccc;
        border: 2px solid black;
        border-radius: 4px;
        font: 40px/50px "";
        color: red;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

    h3 {
        color: black;
        font: 30px/30px "";
        position: absolute;
    }
</style>

<body>
    <p>得分：0</p>
    <button id="btn1">开始</button>
    <div></div>
</body>


<script>
    var sum = 0
    var wsc = document.querySelector("div")
    var btn1 = document.querySelector("#btn1")
    btn1.addEventListener("click", function () {
        btn1.style.display = "none"
        wsc.style.display = "block"

        var p = document.querySelector("p")
        p.innerHTML = "得分：0"
        var set1 = setInterval(function () {
            var ran1 = Math.floor(Math.random() * (1 - 0 + 1))
            var ran2 = Math.floor(Math.random() * (90 - 10 + 1) + 10)
            var ran3 = Math.floor(Math.random() * (100 - 40 + 1) + 40)
            var src = ["./img/guanjun.jpg", "./img/hotdog.jpg"]
            var img1 = document.createElement("img")
            img1.src = src[ran1]
            img1.width = ran3
            img1.style.position = "absolute"
            img1.style.left = ran2 + "vw"
            img1.style.top = -70 + "px"
            img1.style.padding = "0 105px 105px 105px "
            document.body.appendChild(img1)
            var num = parseInt(img1.style.top)
            var set2 = setInterval(function () {
                num += 10
                img1.style.top = num + "px"
                if (num > document.body.clientHeight - img1.height) {
                    clearInterval(set2)
                    if (img1) {
                        img1.parentNode.removeChild(img1)
                    }
                }
            }, 25)
        }, 300)
        document.addEventListener("mousemove", function (evt) {
            var e = evt || window.event
            var target = e.target
            wsc.style.position = "absolute"
            wsc.style.left = e.clientX - 125 + "px"
            wsc.style.top = e.clientY - 125 + "px"
            wsc.style.zIndex = 99
            wsc.style.pointerEvents = "none"
        })


        document.body.onmouseover= function abc (evt) {
            var e = evt || window.event
            var target = e.target
            var num2
            if (target.nodeName == "IMG") 
                target.parentNode.removeChild(target)
                var h3 =document.createElement("h3")
                h3.style.top = e.clientY - 125 + "px"
                h3.style.left = e.clientX - 125 + "px"
                h3.style.opacity = 1
                if (target.src == "http://127.0.0.1:5500/%E7%8E%8B%E6%80%9D%E8%81%AA%E5%90%83%E7%83%AD%E7%8B%97/img/hotdog.jpg") {
                    sum += 1
                    h3.innerHTML = "+1"
                } else if (target.src == "http://127.0.0.1:5500/%E7%8E%8B%E6%80%9D%E8%81%AA%E5%90%83%E7%83%AD%E7%8B%97/img/guanjun.jpg") {
                    sum += 5
                    h3.innerHTML = "+5"
                }
                p.innerHTML = "得分：" + sum
                document.body.appendChild(h3)
                num2 = 1
                var set3 = setInterval(function () {
                    var h3All=document.querySelectorAll("h3")
                    num2-=.2
                    if (num2 > 0) {
                        h3.style.opacity = num2
                    } else if (num2 <= 0) {
                        clearInterval(set3)
                        h3All.forEach(function(items,value){
                        document.body.removeChild(items)
                    })
                        h3.innerHTML = ""
                        num2 = 1
                    }
                },500)
            }
        
        setTimeout(() => {
            clearInterval(set1)
            setTimeout(() => {
                alert(p.innerText)
                if (btn1.innerText == "开始") {
                    btn1.innerText = "重新开始"
                }
                btn1.style.display = "block"
                document.body.onmouseover=null
                wsc.style.display = "none"
                sum = 0

            }, 1000);
        }, 10000);
    })
</script>